<template>
  <div>
      <swiper :options="swiperOption" ref="mySwiper">
        <!-- slides -->
        <swiper-slide v-for='(item,index) in dataList' :key="index">
          <img v-lazy="item.imgUrl">
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>

      </swiper>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { Lazyload } from 'mint-ui';
export default {
  name: 'Swiper',
  props:{
    dataList:Array
  },
  data() {
    return {
      swiperOption: {
        pagination: {
          el:'.swiper-pagination',
          clickable:true
        },
        loop: true,

        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        }
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  computed: {

  },
  methods:{

  }
}
</script>

<style scoped>
.swiper-slide {
  text-align: center;
}
img{
  width: 375px;
  height: auto;
}
</style>